<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="common/header :: head"></head>
<!-- 首页 -->
<body>
<div id="wrapper" style="width: 98%;margin: 0 auto;" v-cloak>

    <div style="width: 100%;margin: 10px 0;">
        <div style="width: 280px;height: 110px;background: #ffffff;
        padding: 8px;border-radius: 5px;margin-left: 20px;display: inline-block;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);"   v-for="(classObj, className) in classData"
             :key="className">
            <el-row style="margin-bottom: 8px;" >
                <el-col :span="8" style="font-size: 17px;font-weight: 600;line-height: 31px;">{{className}}</el-col>
                <el-col :span="3" style="font-size: 15px;line-height: 31px;">评分</el-col>
                <el-col :span="4" style="font-size:24px;font-weight: 600;color: #76EE00;">{{ ((1- (classObj.below20.length+ classObj.below35.length) / classObj.total[0])*10).toFixed(1)}}</el-col>
                <el-col :span="3" style="font-size: 13px;line-height: 31px;">分</el-col>
                <el-col :span="5" style="font-size: 13px;line-height: 31px;color:#AAAAAA;" >
                    <span @click="queryStuid(className)" style="cursor: pointer">查看详情</span></el-col>
            </el-row>
            <el-row style="margin-bottom: 8px;">
                <el-col :span="5" style="font-size: 14px;">低于20</el-col>
                <el-col :span="5" style="font-size: 14px;"><el-tag size="mini" effect="dark" type="danger">{{classObj.below20.length}} 人</el-tag></el-col>
                <el-col :span="5" style="font-size: 14px;">低于35</el-col>
                <el-col :span="5" style="font-size: 14px;"><el-tag size="mini" effect="dark" type="warning">{{classObj.below35.length}} 人</el-tag></el-col>
            </el-row>
            <el-row>
                <el-col style="font-size: 13px;color:#AAAAAA;">辅导员{{classObj.nickname[0]}}-总人数{{classObj.total[0]}}</el-col>
            </el-row>
        </div>
    </div>

    <el-row :gutter="10">
        <el-col>
            <el-card>
                <div slot="header" class="clearfix">
                    <h3>系统公告</h3>
                </div>
                <el-collapse accordion v-model="active">
                    <el-collapse-item :name="index" v-for="(item ,index) in notices">
                        <template slot="title">
                            <b>{{ item.title }}</b>
                            <span style="margin-left: 50px; color: #888">{{ item.time }}</span>
                        </template>
                        <div style="padding: 0 20px">{{ item.content }}</div>
                    </el-collapse-item>
                </el-collapse>
            </el-card>
        </el-col>
    </el-row>

    <el-dialog title="详细信息" :visible.sync="dialogTableVisible" width="60%">
        <el-table :data="studentInfo"  v-loading="loading" border style="width:100%" >
            <!-- 使用v-for循环每个学生数据，每一行对应一个学生 -->
            <el-table-column label="辅导员" >
                <template slot-scope="scope">
                    <div v-for="(student, index) in scope.row.data" :key="index">
                        <div>{{ student.nickname }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="学号" width="120px">
                <template slot-scope="scope">
                    <div v-for="(student, index) in scope.row.data" :key="index">
                        <div>{{ student.stuid }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="姓名" >
                <template slot-scope="scope">
                    <div v-for="(student, index) in scope.row.data" :key="index">
                        <div>{{ student.sname }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="已到" >
                <template slot-scope="scope">
                    <div v-for="(student, index) in scope.row.data" :key="index">
                        <div>{{ student.arrived }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="请假" >
                <template slot-scope="scope">
                    <div v-for="(student, index) in scope.row.data" :key="index">
                        <div>{{ student.leave_ask }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="早退" >
                <template slot-scope="scope">
                    <div v-for="(student, index) in scope.row.data" :key="index">
                        <div>{{ student.leave_early }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="迟到" >
                <template slot-scope="scope">
                    <div v-for="(student, index) in scope.row.data" :key="index">
                        <div>{{ student.be_late }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="旷课" >
                <template slot-scope="scope">
                    <div v-for="(student, index) in scope.row.data" :key="index">
                        <div>{{ student.absenteeism }}</div>
                    </div>
                </template>
            </el-table-column>
            <!-- <el-table-column label="分数"></el-table-column> -->
            <el-table-column label="分数" >
                <template slot-scope="scope">
                    <div v-for="(student, index) in scope.row.data" :key="index">
                        <div>{{ student.final_score }}</div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</div>
<script type="text/javascript">
    new Vue({
        el: "#wrapper",
        data: {
            active: 0,
            users: [],
            roles: [],
            permissions: [],
            notices: [],
            user: {},
            tableData: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            dialogFormVisible: false,
            entity: {},
            isCollapse: false,
            loading: false,
            loadingStuInfo:false,//上传加载效果
            loadingStuInfoText:'拼命处理中请稍后',
            //不合格班级
            classFail:[],
            //班级名
            className:"",
            classData: {
            },
            //学生详细
            studentInfo:[],
            dialogTableVisible:false
        }, mounted() {
            this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
            this.load();
            this.queryIdentity()
        }, methods: {
            queryStuid(className){
                axios.get("student/selectBystuSum",{
                    params:{
                        stuid: this.classData[className].stuid.join(',')
                    }
                }).then(res=>{
                    this.studentInfo=res.data.data
                })
                this.dialogTableVisible=true
    },
            load() {
                $.get("api/notice/").then((res) => {this.notices = res.data;})
            }, handleCollapse() {
                this.isCollapse = !this.isCollapse;
            }, logout() {
                $.get("api/user/logout");
                sessionStorage.removeItem("user");
                location.href = "login";
            }, queryIdentity(){
                if (this.user.identity==4||this.user.identity==1){
                    this.queryFail();
                }
            }, queryFail(){
                axios.get("api/user/queryfail").then(res=>{
                    // 创建一个空对象，用于整理班级数据
                    const classScores = {};
                    // 遍历数据数组
                    if (!res.data.data){
                        return;
                    }
                    res.data.data.forEach(item => {
                        for (const classCode in item) {
                            const scores = item[classCode];
                            // 如果班级代码不存在于 classScores 中，则添加班级代码并创建一个对象
                            if (!classScores[classCode]) {
                                classScores[classCode] = {
                                    below20: [],
                                    below35: [],
                                    stuid: [],
                                    total:[],
                                    nickname:[]
                                };
                            }
                            // 获取分数
                            const score = scores.stuid;
                            classScores[classCode].stuid.push(scores.studentID)
                            // 将分数数据根据条件添加到班级代码对应的数组中

                            classScores[classCode].total.push(scores.total)
                            classScores[classCode].nickname.push(scores.nickname)
                            if (score <= 20) {
                                classScores[classCode].below20.push(scores);
                            } else if (score <= 35) {
                                classScores[classCode].below35.push(scores);
                            }
                        }
                    });
                    this.classData=classScores
                })
            }, open() {
                this.$confirm('经系统检测现有'+this.className+'班学生违纪，请在左下方菜单栏数据监控中查看详细', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                }).catch(() => {
                });
            },
            // rowStyle(row) {
            //     if (row.data[0].final_score <= 50) {
            //         return 'row-red'; // 当 final_score < 48 时，应用 CSS 类 'row-red'
            //     } else {
            //         return ''; // 当 final_score >= 48 时，不应用任何额外的类
            //     }
            // },
        },
        computed: {
        }
    })
</script>
</body>
</html>
